<template>
	<view class="container" style="display: flex;flex-direction: column;">
		<view class="top" style="width: 710rpx;height: 76rpx;background-color: #FFF;padding-top: 10rpx;padding-left: 20rpx;padding-right: 20rpx;">
			<u-search placeholder="请输入商品名称" v-model="itemName" @search='search' @custom='search'></u-search>
		</view>
		<!-- 占位 -->
		<view style="width: 750rpx;height: 76rpx;flex-shrink: 0;z-index: -1;"></view>
		<view v-if="itemList.length>0" style="display: flex;flex-direction: row;width: 100%;background-color: #EFEFEF;" class="content">
			<view style="width: 750rpx;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;background-color: #f8f8f8;" class="content">
				<view v-for="(item, index) in itemList" :key='index' @click="itemHandle(item)"
				style="display: flex;flex-direction: column;margin-top: 20rpx;background-color: #FFF;width: 345rpx;margin-left: 20rpx;">
					<image :src="item.coverUrl" mode='aspectFill' style="width: 100%;height: 400rpx;"></image>
					<view style="padding: 16rpx;">
						<view style="font-size: 28rpx;" class="limitLineNumOfTwo">{{item.name}}</view>
						<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
							<view style="margin-top: 10rpx;color: #fa3534;">¥{{$count.mul(item.priceModel.sellingPrice||0, 1)}}</view>
							<view  @click.stop="joinShopCart(item)">
								<u-icon name="shopping-cart" size='26' color='#fa3534'></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;flex-shrink: 0;z-index: -1" :style="{height: 80 + safeAreaBottom + 'px'}"></view>
		<view style="padding-top: 300rpx;" v-if='itemList.length==0'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view :style="{paddingBottom: safeAreaBottom + 'px'}"
			style="z-index: 999999;position: fixed;bottom: 0;width: 100%;height: 60px;background: #FFFFFF;display: flex;flex-direction: row;align-items: center;justify-content:space-between;">
			<!-- 底部按钮 -->
			<view style="display: flex;flex-direction: row;align-items: center;margin-left: 20rpx;position: relative;"
				@click="goShopCart">
				<image style="width: 60rpx;height: 60rpx;" src="/static/merchant/shopCart.png" mode="aspectFill">
				</image>
				<text v-if="totalNum>0" style="width: 40rpx;height: 40rpx;border-radius: 20rpx;background-color: #FC5E53;font-size: 24rpx;
				color: #FFF;line-height: 40rpx;text-align: center;position: relative;bottom: 20rpx;right: 10rpx;">{{totalNum}}</text>
			</view>
			<!-- 计算 -->
			<view>
				<view style="display: flex;flex-direction: row;align-items: center;margin-left: 20rpx;">
					<!-- <view style="margin-top: 10rpx;color: #000;margin-right: 30rpx;font-size: 36rpx;font-weight: bold;">
						¥{{totalPrice}}</view> -->
					<view
						style="text-align: center;width: 200rpx;height: 80rpx;line-height: 80rpx;color:#FFF;background:#FC5E53;font-size:30rpx;font-weight:bold;margin-right:20rpx"
						@click="goShopCart">去结算</view>
				</view>
				<!-- <view v-else style="margin-right:20rpx">
					差¥{{$count.sub(storeInfo.startPrice, totalPrice)}}起送
				</view> -->
			</view>
		</view>
		<!-- 规格选择弹窗 -->
		<itemspecPopup ref="itemspecPopup" :safeAreaBottom='safeAreaBottom' :itemModel='itemModel' @joinShopCartSuccess='joinShopCartSuccess' @skuSpecClick='skuSpecClick' @confirm='skuSpecConfirm' @close='itemspecPopupClose' @open='itemspecPopupOpen'></itemspecPopup>
	</view>
</template>

<script>
	import {
		page
	} from '@/api/page.js'
	import {
		common
	} from "@/api/common.js";
	import {
		merchant
	} from '@/api/merchant.js'
	import { findSpecList, getSpecList_sel, getSpecs_sel, goCreateOrderParams } from './function.js'
	import itemspecPopup from '@/pageA/merchant/components/itemspecPopup/itemspecPopup.vue'
	export default {
		components: {
			itemspecPopup
		},
		data() {
			return {
				page: 1,
				size: 20,
				showEmpty: false,
				isLastPage: false,
				itemList: [],
				itemName: '',
				totalPrice: 0,
				totalNum: 0,
				modalName: 0,
				storeInfo: {},
				shopCartItems: [],
				itemModel: {},
				safeAreaBottom: 0,
				shopCartScene: 'giftSection',
			}
		},
		onLoad() {
			console.log('quary', this.$Route.query)
			this.getItemList()
		},
		onShow() {
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			console.log('ada', this.safeAreaBottom)
			this.getShopCartCount()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getItemList()
		},
		onReachBottom() {
			console.log('上拉加载更多', this.isLastPage)
			if (this.isLastPage) {
				return
			}
			this.getItemList()
		},
		onShareAppMessage(res) {
			return {
				title: '',
				path: this.$Route.path
			}
		},
		methods: {
			search(){
				this.page = 1
				this.getItemList()
			},
			joinShopCartSuccess(){
				this.$refs.itemspecPopup.close()
				this.getShopCartCount()
			},
			getShopCartCount(){
				common.operateActionPost('/merchant/shopCart/getShopCartCount/', {scene: this.shopCartScene}).then(res => {
					if(res.data.code == 10000){
						this.totalNum = res.data.data.count
					}
				})
			},
			joinShopCart(item){
				console.log('加入购物车')
				this.itemModel = item
				this.payClick()
			},
			goShopCart(){
				this.$Router.push({
					name: 'shopCartForGift',
					params: {}
				})
			},
			payClick(){
				var specList = findSpecList(this.itemModel.skuList)
				this.$set(this.itemModel, 'specList', specList)
				// 默认点击第一个
				this.itemModel.specList.forEach((item, index)=>{
					this.skuSpecClick('', index, 0)
				})
				this.$refs.itemspecPopup.show(this.shopCartScene)
			},
			getItemList() {
				var params = {
					page: this.page,
					size: this.size,
					name: this.itemName
				}
				if (this.$Route.query){
					params = Object.assign(params, this.$Route.query)
				}
				merchant.getItemListForC(params).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
			itemHandle(item) {
				this.$Router.push({
					name: 'itemDetail',
					params: {
						obj_id: item.id,
						shopCartScene: this.shopCartScene
					}
				})
			},
			// 弹窗立即支付点击事件
			skuSpecConfirm(e){
				for(var spec of this.itemModel.specList){
					var flag = 0
					this.itemModel.specList_sel = this.itemModel.specList_sel?this.itemModel.specList_sel:[]
					for(var spec_sel of this.itemModel.specList_sel){
						if(spec.specName == spec_sel.specName){
							flag = 1
						}
					}
					if(flag==0){
						this.$show.showMessage('请选择'+spec.specName)
						return
					}
				}
				this.itemModel.payCount = e
				this.goCreateOrder()
				this.$refs.itemspecPopup.close()
			},
			goCreateOrder(){
				// console.log('去下单', this.itemModel)
				// 添加购物车商品
				var params = goCreateOrderParams(this.itemModel)
				this.$Router.push({
					name: 'createOrder',
					params: params
				})
			},
			skuSpecClick(spec, index, index2){
				this.setSpecStatus(spec, index, index2)
				this.itemModel.specList_sel = getSpecList_sel(this.itemModel.specList)
				this.itemModel.specs_sel = getSpecs_sel(this.itemModel.specList_sel)
				this.getSkuModel()
				this.$forceUpdate()
			},
			itemspecPopupClose(){
				
			},
			itemspecPopupOpen(){
			},
			setSpecStatus(spec, index, index2){
				//先把当前的组的所有select设false
				var specList = this.itemModel.specList
				var specValueList = specList[index].specValueList
				for (var i in specValueList) {
					var item = specValueList[i]
					if (index2 == i) {
						item.select = true
					} else {
						item.select = false
					}
				}
			},
			//查找选中的sku
			getSkuModel(){
				var specValues = JSON.stringify(this.itemModel.specList_sel)
				for(var sku of this.itemModel.skuList){
					if(sku.specValues == specValues){
						if(sku.cover){
							this.itemModel.coverUrl = sku.coverUrl
						}
						this.itemModel.priceModel = sku.priceModel
						// this.itemModel.sellingPrice = sku.sellingPrice
						// this.itemModel.incomesPrice = sku.incomesPrice
						// this.itemModel.realPay = sku.realPay
						this.itemModel.stock = sku.stock
						this.itemModel.skuId = sku.id
						this.itemModel.specValues = sku.specValues
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
	}
	.top{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}
	.left{
		position: fixed;
		left: 0;
		top: 78rpx;
	}
	// .content{
	// 	height: calc(100vh - 78rpx);
	// }

</style>
